<template>
	<view class="homestay-list-page">
		<view class="top-box">
			<view class="search-box">
				<view class="area">苏州市</view>
				<view class="input">
					<input class="uni-input" focus placeholder="景点/地址/房源名" />
				</view>
				<view class="time">5.10-5.20</view>
			</view>
			<view class="map-box">
				<image class="map-icon"></image>
				<text>地图</text>
			</view>
		</view>
		<view class="filter-box">
			<view class="filter-item">
				<text class="item-name">位置区域</text>
				<image class="drop-icon"></image>
			</view>
			<view class="filter-item">
				<text class="item-name">价格</text>
				<image class="drop-icon"></image>
			</view>
			<view class="filter-item">
				<text class="item-name">人数</text>
				<image class="drop-icon"></image>
			</view>
			<view class="filter-item">
				<text class="item-name">推荐排序</text>
				<image class="drop-icon"></image>
			</view>
			<view class="filter-item">
				<text class="item-name">筛选</text>
				<image class="drop-icon"></image>
			</view>
		</view>
		<scroll-view class="tag-box" scroll-x>
		<view class="tag-list">
			<view class="tag-item" v-for="(item, index) in tagList" :key="index">{{item}}</view>
			</view>
		</scroll-view >
		<view class="banner-box"></view>
		<scroll-view class="list-group">
			
			<view class="homestay-card-item" v-for="(homestayItem, homestayIndex) in homestayList" @click="handleGoDetail()">
				<view class="img-box"></view>
				<view class="info-box">
					<view class="title">{{homestayItem.title}}</view>
					<view class="score-row">
						<view class="score-num">{{homestayItem.score}}</view>
						<view class="comment-text">{{homestayItem.comment}}</view>
						<view class="pay-num">{{homestayItem.payNum}}</view>
					</view>
					<view class="desc">{{homestayItem.desc}}</view>
					<view class="distance-row">
						<view class="distance-text">距您直线{{homestayItem.distance}}米</view>
						<view class="association-text">{{homestayItem.association}}</view>
					</view>
					<view class="tag-box">
						<view class="tag-item" v-for="(tagItem, tagIndex ) in homestayItem.tags">{{tagItem}}</view>
					</view>
					<view class="price-box">
						<view class="discount-text">今夜特价享{{homestayItem.discount}}折</view>
						<view class="final-price-box">
							<view class="price-info">
								<view class="origin-price">￥{{homestayItem.originPrice}}</view>
								<view class="current-price">￥{{homestayItem.currentPrice}}</view>
							</view>
							<view class="price-tips">
								{{homestayItem.pricetips}}
								
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				tagList: ['loft复式', '城景房','可做饭', '巨幕影院', '能K歌'],
				homestayList:[
					{
						title: '一城一迹泛娱乐民宿 火车站/万达广场/平 江月/虎丘 景点民宿/地铁口/出行方便一城一迹泛娱乐民宿 火车站/万达广场/平 江月/虎丘 景点民宿/地铁口/出行方便',
						score: 5,
						comment: "“很喜欢这家民宿”",
						payNum: 118,
						desc: '整套1室·1床·可住2人',
						distance: 200,
						association: '火车站',
						tags: ['密码入住', '适合情侣','立即确认'],
						discount: 6.8,
						originPrice: 300,
						currentPrice: 168,
						pricetips: '今夜特价·已减142'
					}
				]
			}
		},
		methods: {
			// 跳转详情
			handleGoDetail(){
				uni.navigateTo({
					url: '/pages/homestay/detail/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.homestay-list-page {
	.top-box {
		padding: 0px 30rpx;
		margin-top: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		.map-box {
			width: 50rpx;
			display:flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size:24rpx;
			.map-icon {
				width: 31rpx;
				height: 31rpx;
				margin-bottom: 15rpx;
			}
		}
		.search-box {
			width: calc(100% - 65rpx);
			border-radius: 40rpx;
			background-color: #fff;
			padding: 7rpx 0rpx;
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.area {
				width: 155rpx;
				text-align: center;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #000000;
				border-right: 1rpx solid #DBDBDB;
			}
			.time {
				width: 150rpx;
				text-align: center;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				font-size: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 600;
				color: #000000;
			}
			.input {
				width: calc(100% - 295rpx);
				padding: 0rpx 0rpx 0rpx 30rpx;
			}
		}
	}
	
	.filter-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		
		.filter-item {
			flex:1;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			&:not(:last-child) {
				border-right: 1rpx solid #E8E8E8;
			}
			.item-name {
				font-size: 22rpx;
				font-family: FZLTXHK;
				font-weight: normal;
				color: #000000;
				margin-right: 10rpx
			}
			.drop-icon {
				width: 17rpx;
				height: 17rpx;
			}
		}
	}

	.tag-box {
	
		.tag-list {
			background-color: #fff;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: nowrap;
			padding: 18rpx 30rpx;
			.tag-item {
				padding: 15rpx 20rpx;
				background: #FFFFFF;
				box-shadow: 0px 2px 9px 1px rgba(0,0,0,0.07);
				border-radius: 27px;
				margin-right: 23rpx;
				white-space: nowrap;
				display: inline-block;
			}
		}
		
	}
	.banner-box {
		padding: 20rpx 30rpx;
		background-color: #fff;
		min-height: 80rpx;
	}
	.list-group {
		background-color: #fff;
		.homestay-card-item {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 33rpx;
			.img-box {
				width: 242rpx;
				height: 291rpx;
				border-radius: 10rpx;
				margin-right: 15rpx;
				
			}
			.info-box {
				width: calc(100% - 260rpx);
				.title{
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #000000;
					margin-bottom: 16rpx;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp:2;
					overflow: hidden;
				}
				.score-row {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					margin-bottom: 15rpx;
					.score-num {
						padding:0rpx 6rpx;
						height: 27rpx;
						line-height: 27rpx;
						background: #0156F6;
						border-radius: 5rpx;
						font-size: 18rpx;
						font-family: FZLTZHK;
						font-weight: normal;
						color: #FFFFFF;
						margin-right: 10rpx;
					}
					.comment-text {
						max-width: 200rpx;
						font-size: 22rpx;
						font-family: FZLTXHK;
						font-weight: normal;
						color: #000000;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-right: 17rpx;
					}
					.pay-num {
						font-size: 22rpx;
						font-family: FZLTXHK;
						font-weight: normal;
						color: #717171;
					}
				}
				.desc{
					font-size: 20rpx;
					font-family: FZLTXHK;
					font-weight: normal;
					color: #000000;
					margin-bottom: 15rpx;
				}
				.distance-row {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					font-size: 20rpx;
					font-family: FZLTXHK;
					font-weight: normal;
					color: #717171;
					margin-bottom: 15rpx;
					.distance-text {
						margin-right: 20rpx;
					}
				}
				.tag-box {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					margin-bottom: 13rpx;
					.tag-item {
						height: 32rpx;
						line-height: 32rpx;
						background: #FFFFFF;
						border: 1rpx solid #D7DCE6;
						border-radius: 5rpx;
						padding: 0rpx 10rpx;
						font-size: 16rpx;
						font-family: FZLTXHK;
						font-weight: normal;
						color: #717171;
						margin-right: 10rpx;
					}
				}
				.price-box {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: flex-start;
					.discount-text {
						font-size: 16rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FF3000;
					}
					.final-price-box {
						.price-info {
							display: flex;
							flex-direction: row;
							justify-content: flex-end;
							align-items: flex-end;
							margin-bottom: 8rpx;
							.origin-price {
								font-size: 22rpx;
								font-family: Adobe Heiti Std;
								font-weight: normal;
								text-decoration: line-through;
								color: #CACACA;
							}
							.current-price {
								font-size: 24rpx;
								font-family: Source Han Sans CN;
								font-weight: 500;
								color: #FF0000;
								margin-left: 11rpx;
							}
						}
						.price-tips {
							height: 31rpx;
							line-height: 31rpx;
							background: rgba(255,0,0,0.1);
							border-radius: 5rpx;
							font-size: 16rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #FF0000;
						}
					}
					
				}
			}
		}
	}
}
</style>